@import "common";
@base: 50;
body{
  min-width: 320px;
  margin: 0 auto;
  width: 15rem;
  line-height: 1.5;
  font-family: Arial,Helvetica;
  background: #F2F2F2;
}
a{
  text-decoration: none;
}
.search-content{
  position: fixed;
  display: flex;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 15rem;
  height: 88rem / @base;
  background-color: #FFC001;
  .classfiy{
    margin: 11rem / @base 25rem / @base 7rem / @base 24rem / @base;
    width: 44rem / @base;
    height: 70rem / @base;
    background: url("../images/classify.png");
    background-size: 44rem / @base 70rem / @base;
  }
  .search{
    flex: 1;

    input{
      border: 0;
      width: 100%;
      height: 66rem / @base;
      border-radius: 33rem / @base;
      background-color: #FFF2CC;
      font-size: 25rem / @base;
      padding-left: 55rem / @base;
      color: #757575;

    }
  }
  .login{
    width: 75rem / @base;
    height: 70rem / @base;
    line-height: 70rem / @base;
    margin: 10rem / @base;
    font-size: 25rem / @base;
    text-align: center;
    color: #fff;
  }
}

.banner{
  width: 15rem;
  height: 368rem / @base;
  img{
    width: 100%;
    height: 100%;
  }
}

.ad{
  display: flex;
  a{
    flex: 1;
    img{
      width: 100%;
      height: 100%;
    }
  }
}

nav{
  width: 15rem;
  a{
    float: left;
    display: flex;
    flex-direction: column;
    width: 150rem / @base;
    height: 140rem / @base;
    text-align: center;
    img{
        width: 82rem / @base;
        height: 82rem / @base;
        margin: 10rem / @base auto 0;

    }
    span{
      font-size: 25rem / @base;
      color: #333;

    }
  }
}

